// 严格模式下给未定义的值赋值并输出会报错
"use strict";
//es5 es6不用了
// var _name = 18; 
//es6
// let name = 20;
//es6
// const arr = [11,2]





const divDom = window.Azong.$('container-wrap')
    // const divDom = $('container-wrap')

// $('table-data-wrap')
// console.log(divDom);
//固定语法
//创建dom元素
const tableDom = window.Azong.createEl("table")
    // const tableDom = createEl("table");
    // const styles = {
    //     'width': '100%',
    //     'border': '0',
    //     'cellpadding': '0',
    //     'cellspacing': '0',
    //     'id': 'table-data-wrap'
    // };
    // 设置属性
window.Azong.setAttr(tableDom, {
        'width': '100%',
        'border': '0',
        'cellpadding': '0',
        'cellspacing': '0',
        'id': 'table-data-wrap'
    })
    // setAttr(tableDom, 'width', '100%')
    // setAttr(tableDom, 'border', '0')
    // setAttr(tableDom, 'cellpadding', '0')
    // setAttr(tableDom, 'cellspacing', '0')
    // setAttr(tableDom, 'id', 'table-data-wrap')
    // tableDom.setAttribute('width', '100%');
    // tableDom.setAttribute('border', '0');
    // tableDom.setAttribute('cellpadding', '0');
    // tableDom.setAttribute('cellspacing', '0');
    // tableDom.setAttribute('id', 'table-data-wrap');
    // $('table-data-wrap');



let theadHtml = `<thead><tr>`
    // 遍历数组
tableTheadData.forEach((elem) => {
        //检查是否有width
        let width = elem.width ? `width=${elem.width}` : '';
        // 检查是否有id
        let id = elem.id ? `id=${elem.id}` : '';
        theadHtml += `<th ${width} ${id}>
                    ${elem.label}
                    </th>`
    })
    // 生成表格

// 列表数据
let tbodyHtml = `<tbody>`
let trHtml = ``
for (let i = 0; i < tableBodyData.length; i++) {
    const data = tableBodyData[i]
    console.log(data);
    trHtml += `<tr>`
        // 头像
    trHtml += `<td>
                    <div class="face">
                        <span class="gender icon-${data.face.gender}"></span>
                        <img src="${data.face.img}" alt="">
                    </div>
                </td>`
        // 姓名
    trHtml += `<td>
                    <div class="people-name">
                    <h4 class="name">${data.name.trueName}</h4>
                    <span class="nickname option-05 fs-12">${data.name.nickname}</span>
                    </div>
                    </td>`
    trHtml += ` <td>
                    <div class="gender-wrap">
                        <span class="gender icon-girl ${data.face.gender==='girl'? '':"option-05"}"></span>
                        <span class="gender icon-boy ${data.face.gender==='boy'? '':"option-05"}"></span>
                    </div>
                </td>`
    trHtml += `<td>
                <div class="age text-center">
                    <p>${data.age.number}</p>
                    <span class="option-05 fs-12">（单身狗）</span>
                </div>
            </td>`
    trHtml += `<td>
                <div class="phone">
                ${data.phone.code}<span class="option-05">（${data.country.name}）</span><br />
                ${data.phone.number}
            </div>
        </td>`
    trHtml += `<td>
                    <div>
                    <img src="${data.country.National_flag}" alt="${data.country.name}">
                    <p class="country-name" style="color: ${data.country.color};">${data.country.name}</p>
                </div>
                </td>`
    let likes = ``
    data.like.forEach(elem => {
        likes += `<span style="background-color: ${elem.color};">${elem.tag}</span>`
    })

    trHtml += `<td><div class="likes">${likes}</div></td>`
    trHtml += `<td>
                <div class="grade">
                    <span class="role-name">${data.rank.name}</span>
                    <div class="grade-wrap icon-grade">
                        <div class="grade-high icon-grade" style="width:${data.rank.level *16}%;"></div>
                    </div>
                </div>
            </td>`
    trHtml += `<td>
    <div class="operation">
        <a href="javascript: void(0);" class="operation-btn">设置</a>
        <ul class="links">
            <a href="javascript: void(0);">编辑</a>
            <a href="javascript: void(0);">删除</a>
            <a href="javascript: void(0);">锁定</a>
            <a href="javascript: void(0);">收起</a>
        </ul>
    </div>
</td>`
    trHtml += `</tr>`
}



tbodyHtml += `${trHtml}</tbody>`

theadHtml += `</tr></thead>`
    // console.log(theadHtml)
tableDom.innerHTML = theadHtml + tbodyHtml;

divDom.appendChild(tableDom)

//整合学习内容